<template>
	<view class="detail-container">
		<view>
			<view class="status">
				<text>检查点类型：{{ checkPointType[rectifyInfo["检查点类型"]] }}</text>
				<!-- <text style="">{{ title }}</text> -->
				<text :style="{color: statusColor[rectifyInfo['整改状态']]}">{{rectifyStatus[rectifyInfo['整改状态']]}}</text>
			</view>
			<view class="order-content">
				<view class="content-item">
					<text class="item-name">检查点名称：</text>
					<text>{{ rectifyInfo["检查点名称"] }}</text>
				</view>
				<view class="content-item">
					<text class="item-name">检查点地址：</text>
					<view style="word-break: break-all; flex: 1">{{rectifyInfo["地址"] }}</view>
				</view>
				<view class="content-item">
					<text class="item-name">所属网格：</text>
					<view style="word-break: break-all; flex: 1">{{rectifyInfo["所属网格"]}}</view>
				</view>
				<view class="content-item">
					<text class="item-name">网格长：</text>
					<text>{{ rectifyInfo["网格长"] }}</text>
				</view>
				<view v-if="rectifyInfo['网格员']" class="content-item">
					<text class="item-name">网格员：</text>
					<view style="word-break: break-all; flex: 1">{{
            rectifyInfo["网格员"]
          }}</view>
				</view>
				<view v-if="rectifyInfo['网格员电话']" class="content-item">
					<text class="item-name">网格员电话</text>
					<view style="word-break: break-all; flex: 1">{{
            rectifyInfo["网格员电话"]
          }}</view>
					<!-- <text>{{renovationTicket['施工单位']}}</text> -->
				</view>
				<view class="content-item">
					<text class="item-name">负责人：</text>
					<view style="word-break: break-all; flex: 1">{{
            rectifyInfo["负责人"]
          }}</view>
					<!-- <text>{{renovationTicket['施工负责人']}}</text> -->
				</view>
				<view class="content-item">
					<text class="item-name">负责人电话：</text>
					<view style="word-break: break-all; flex: 1">{{rectifyInfo["负责人电话"]}}</view>
				</view>
				<view class="content-item">
					<text class="item-name">整改事项：</text>
					<!-- <view style="word-break: break-all; flex: 1">{{rectifyInfo['整改项']}}</view> -->
				</view>
				<view class="check-item" v-for="(item, index) in rectifyInfo['整改项']" :key="item.id">
					<view>
						{{index+1}}、{{item['整改项描述']}}
					</view>
					<uncheck-record :inspect="item" v-if="item['描述'] || item['附件']"></uncheck-record>
				</view>
				<view class="content-item" v-if="rectifyInfo['设施整改项']">
					<text class="item-name">设施整改项：</text>
					<!-- <view style="word-break: break-all; flex: 1">{{rectifyInfo['设施整改项']}}</view> -->
				</view>
				<view class="check-item" v-for="(item,index) in rectifyInfo['设施整改项']" :key="item.id">
					<view style="margin-bottom: 20rpx;">
						{{'(' + (index+1) + ')'}} {{item['整改项描述']}}
					</view>
					<rectify-install :install="item"></rectify-install>
				</view>
				<view class="content-item">
					<text class="item-name">整改创建日期：</text>
					<view style="word-break: break-all; flex: 1">{{rectifyInfo["整改开始日期"]}}</view>
				</view>
				<view class="content-item">
					<text class="item-name">整改时限：</text>
					<view style="word-break: break-all; flex: 1">{{rectifyInfo['整改时限']+'天'}}</view>
				</view>
				<view class="content-item" v-if="rectifyInfo['照片上传'][0]">
					<text class="item-name">照片附件：</text>
					<view v-if="photoNum !== 3" style="word-break: break-all; flex: 1">
						<file-list :file="photoFile"></file-list>
					</view>
				</view>
				<view  v-if="photoNum == 3">
					<file-list :file="photoFile"></file-list>
				</view>
				<view class="content-item" v-if="rectifyInfo['完成时间']">
					<text class="item-name">整改完成日期：</text>
					<view style="word-break: break-all; flex: 1">{{
            rectifyInfo['完成时间']
          }}</view>
				</view>
				<view class="content-item" v-if="rectifyInfo['整改提交描述']">
					<text class="item-name">整改提交描述：</text>
					<view style="word-break: break-all; flex: 1">{{rectifyInfo['整改提交描述']}}</view>
				</view>
				<view class="content-item" v-if="rectifyInfo['整改提交附件']">
					<text class="item-name">整改提交附件：</text>
					<view v-if="submitNum !== 3" style="word-break: break-all; flex: 1">
						<file-list :file="submitFile"></file-list>
					</view>
				</view>
				<view class="content-item" v-if="submitNum == 3">
					<file-list :file="submitFile"></file-list>
				</view>
				<view class="content-item" v-if="signFile">
					<text class="item-name">负责人签字：</text>
					<view style="word-break: break-all; flex: 1">
						<preview-img v-if="signFile" :url="signFile"></preview-img>
						<!-- <van-image fit="cover" width="100" height="100" :src="signFile" /> -->
					</view>
				</view>
				<view class="content-item" v-if="rectifyInfo['整改描述']">
					<text class="item-name">整改审核描述：</text>
					<view style="word-break: break-all; flex: 1">{{rectifyInfo['整改描述']}}</view>
				</view>
				<view class="content-item" v-if="rectifyInfo['整改审核附件']">
					<text class="item-name">整改审核附件：</text>
					<view v-if="approveNum !== 3" style="word-break: break-all; flex: 1">
						<file-list :file="approveFile"></file-list>
					</view>
				</view>
				<view  v-if="approveNum == 3">
					<file-list :file="approveFile"></file-list>
				</view>
				<view class="content-item" v-if="gridSignFile">
					<text class="item-name">网格长签字：</text>
					<view style="word-break: break-all; flex: 1">
						<preview-img :url="gridSignFile"></preview-img>
						<!-- <van-image fit="cover" width="100" height="100" :src="gridSignFile" /> -->
					</view>
				</view>
			</view>
		</view>
		<button v-if="rectifyInfo['整改状态'] == 2" class="rectify-btn" @click="goComplete">完成整改</button>
		<button v-if="rectifyInfo['整改状态'] == 4 && person == 1" class="rectify-btn" @click="goApprove">审核</button>
	</view>
</template>

<script>
	import uncheckRecord from '../components/uncheckRecord.vue'
	import rectifyInstall from '../components/rectifyInstall.vue'
	import FileList from '../components/fileList'
	import PreviewImg from '../components/previewImg'
	import dayjs from 'dayjs'
	import { mapState } from 'vuex'
	export default {
		components: {
			rectifyInstall,
			uncheckRecord,
			FileList,
			PreviewImg
			// LbPicker
		},
		data() {
			return {
				params: {
					id: null,
				},
				rectifyStatus: this.$type.rectifyStatus,
				statusColor: {
					1: '#43cc46',
					2: '#3080fb',
					3: '#fb5656',
					4: '#ffb93f',
				},
				rectifyInfo: {},
				checkPointType: this.$type.checkPointType,
				signFile: '',
				gridSignFile: '',
				imgLength: 0,
				approveNum: 0,
				submitNum: 0,
				photoNum: 0,
				imgItem: [],
				approveFile: {},
				submitFile: {},
				photoFile: {},
				person: null,
				phone: null
			};
		},
		onLoad(options) {
			this.params.id = +options.id;
			this.person = uni.getStorageSync('gridInfo').人员角色
			this.getRectifyInfo();
		},
		onShow() {
			this.phone = uni.getStorageSync('gridInfo').手机号
		},
		computed: {
			...mapState(['personType'])
		},
		methods: {
			goApprove() {
				uni.navigateTo({
					url: '../rectifyApprove/rectifyApprove?id=' + this.params.id
				})
			},
			async goComplete() {
				if(this.personType == 1 && this.rectifyInfo.检查点类型 == 'room') {
					const res = await this.$http.post("gridSystem/check/solveInfo", {id: this.rectifyInfo.检查点id})
					const res1 = await this.$http.post('gridSystem/room/info', {房屋id: res.data.房屋.房屋id})
					if(res1.data.户主.手机号 !== this.phone) {
						uni.showToast({
							title: '您不是该房屋的户主,没有操作权限',
							icon: 'none'
						})
						return
					}
				}
				if(this.personType == 1 && this.rectifyInfo.负责人电话 !== this.phone) {
					uni.showToast({
						title: '您不是该检查点的负责人,没有操作权限',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '../completeRectify/completeRectify?id=' + this.params.id
				})
			},
			getRectifyInfo() {
				uni.showLoading()
				this.$http.post("gridSystem/check/solveInfo", this.params).then((res) => {
					if (res.code === 10000) {
						console.log(res)
						if (res.data.负责人签字 !== '') {
							this.downloadSign(res.data.负责人签字)
						}
						if (res.data.网格长签字 !== '') {
							this.downloadGridSign(res.data.网格长签字)
						}
						if (res.data.整改提交附件 !== null) {
							res.data.整改提交附件.forEach((item, index) => {
								this.downloadSubmit(item, index)
							})
						}
						if (res.data.照片上传 !== null) {
							res.data.照片上传.forEach((item, index) => {
								this.downloadPhoto(item, index)
							})
						}
						// if (res.data.整改审核附件 !== null) {
						// 	res.data.整改审核附件.forEach((item, index) => {
						// 		this.downloadApprove(item, index)
						// 	})
						// }
						res.data.整改开始日期 = dayjs(res.data.整改开始日期).format('YYYY-MM-DD HH:mm:ss')
						res.data.完成时间 = res.data.完成时间 && dayjs(res.data.完成时间).format('YYYY-MM-DD') 
						// res.data.整改项 = res.data.整改项 && res.data.整改项.map(item => item.整改项描述).join()
						// res.data.设施整改项 = res.data.设施整改项 && res.data.设施整改项.map(item => item.整改项描述).join()
						this.rectifyInfo = res.data
					}
				});
			},
			downloadSign(id) {
				this.$http.post('common/file/download', {
					id
				}).then(res => {
					// console.log(res.data.fileData)
					if (res.code === 10000) {
						this.signFile = res.data.fileData
					}
				})
			},
			downloadGridSign(id) {
				this.$http.post('common/file/download', {
					id
				}).then(res => {
					// console.log(res.data.fileData)
					if (res.code === 10000) {
						this.gridSignFile = res.data.fileData
					}
				})
			},
			// 整改提交
			downloadSubmit(id, index) {
				this.submitNum++
				// this.imgLength++
				this.$http.post('common/file/download', {
					id
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.imgItem.push(res.data.fileData)
						this.submitFile[index] = {}
						this.submitFile[index].fileData = res.data.fileData
						// console.log(this.resultFile)
					}
				})
			},
			downloadPhoto(id, index) {
				this.photoNum++
				// this.imgLength++
				this.$http.post('common/file/download', {
					id
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.imgItem.push(res.data.fileData)
						this.photoFile[index] = {}
						this.photoFile[index].fileData = res.data.fileData
						// console.log(this.resultFile)
					}
				})
			},
			// 整改审批
			downloadApprove(id, index) {
				this.imgLength++
				this.approveNum++
				this.$http.post('common/file/download', {
					id
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.imgItem.push(res.data.fileData)
						this.approveFile[index] = {}
						this.approveFile[index].fileData = res.data.fileData
						console.log(this.ticketFile)
					}
				})
			}
		},
	};
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #f5f5f5;
		min-height: 100%;
		height: auto;
	}

	.van-empty__description {
		margin-top: -4rpx !important;
	}

	.detail-container {
		background-color: #f5f5f5;

		.accept-ticket {
			height: 90rpx;
			color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #3080fb;
		}

		.status {
			width: 750rpx;
			height: 88rpx;
			display: flex;
			padding: 0 30rpx;
			box-sizing: border-box;
			justify-content: space-between;
			background-color: #fff;
			border-bottom: 2rpx solid #f5f5f5;
			align-items: center;

			text {
				&:nth-child(1) {
					color: #333;
					font-size: 40rpx;
				}
			}
		}

		.order-content {
			width: 750rpx;
			background-color: #fff;
			margin-bottom: 135rpx;
			padding-left: 30rpx;
			padding-top: 30rpx;

			.content-item {
				// height: 72rpx;
				padding: 20rpx 20rpx 20rpx 0;
				display: flex;
				align-items: center;
				font-size: 34rpx;
				.item-name {
					width: 238rpx;
					margin-right: 20rpx;
				}
			}

			.content-img {
				width: 100%;
				height: 280rpx;
				display: flex;
				margin-top: 40rpx;

				.img-item {
					width: 220rpx;
					height: 220rpx;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}

					&:last-child {
						margin-right: 0;
					}
				}
			}

			.sign-img {
				width: 100%;
				height: 280rpx;
				// background-color: pink;
				display: flex;
				padding-top: 40rpx;

				.left-text {
					width: 200rpx;
				}

				.sign-item {
					width: 220rpx;
					height: 220rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.detail-item {
				width: 750rpx;
				height: 88rpx;
				display: flex;
				line-height: 88rpx;
				// padding-left: 20rpx;
				background-color: #fff;
				border-bottom: 2rpx solid #f5f5f5;

				.left {
					margin-right: 37rpx;
				}

				.sign {
					width: 115rpx;
					height: 88rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					margin-right: 26rpx;
				}
			}
		}

		.van-empty {
			height: 300rpx;
			margin-bottom: 20rpx;
		}
	}

	.rectify-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		background: #3080FB;
		color: #fff;
		border-radius: 0;
	}
</style>
